<template>
  <div>
    <p>标题:{{ $route.params.name }}</p>
    <p>内容:{{ $route.query.time }}分钟</p>

    <p>标题:{{name }}</p>
    <p>内容:{{ time }}分钟</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Detail",
});
</script>

<script setup lang="ts">
import {toRefs , computed} from "vue"
import { useRoute } from "vue-router";
//得到当前路由对象
const route = useRoute()

/* //用toRefs从代理对象中解构出来得到的是ref对象可以响应式操作
const {name} = toRefs(route.params)
const {time} = toRefs(route.query) */


//用计算属性计算得到当前路由信息中的值，得到的是ref对象
const name = computed(()=>{
  return route.params.name
})
const time = computed(()=>{
  return route.query.time
})

</script>